… controller state machine (#27761)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

The Predict buy/order flow previously navigated between separate screens
for preview, token selection, and deposit confirmation. This caused
visible screen flicker and complex navigation state synchronization that
led to multiple UX bugs (header flicker, input delay, stale deposit
amounts, broken back-swipe behavior).

This PR migrates the entire buy flow to a **single-route architecture**
where all order states (preview, token selection, deposit, order
placement) are managed by `PredictController` and rendered inline within
`PredictBuyWithAnyToken`. Key changes:

- **Controller state machine**: Added `ActiveOrderState` enum (`PREVIEW
→ PAY_WITH_ANY_TOKEN → DEPOSITING → PLACE_ORDER → PLACING_ORDER →
SUCCESS`) with dedicated controller methods for each transition
(`initializeOrder`, `onConfirmOrder`, `onDepositOrder`,
`onDepositOrderSuccess`, `onDepositOrderFailed`, `onOrderError`,
`onOrderCancelled`, `onPlaceOrderEnd`, `onBuyPaymentTokenChange`).
- **Headless confirmation component**: `PredictPayWithAnyTokenInfo` is
now a headless component that syncs deposit amounts and payment tokens
via effects, rather than living on a separate navigation screen.
- **Removed navigation-driven flows**: Eliminated
`usePredictBuyBackSwipe`, `usePredictPayWithAnyToken`,
`usePredictOrderTracking`, `usePredictPayWithAnyTokenTracking`, and
redirect/confirmation logic that drove screen transitions.
- **Simplified hooks**: Streamlined `usePredictBuyPreviewActions`
(reacts to `activeOrder.state` changes via effects),
`usePredictPaymentToken`, `usePredictActiveOrder`,
`usePredictBuyInputState`, and `usePredictBuyConditions`.
- **Feature flag**: Gated pay-with-any-token logic behind a feature
flag.
- **Transaction event handling**: `PredictController` now handles
`predictDepositAndOrder` transaction status events directly (confirmed →
place order, failed → retry, rejected → cancel).

Net result: **~800 lines removed**, eliminated screen flicker, and
centralized order lifecycle in the controller instead of distributed
across navigation hooks.

## **Changelog**

<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`

If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`

(This helps the Release Engineer do their job more quickly and
accurately)
-->

CHANGELOG entry: null

## **Related issues**

Fixes:

## **Manual testing steps**

```gherkin
Feature: my feature name

  Scenario: user [verb for user action]
    Given [describe expected initial app state]

    When user [verb for user action]
    Then [describe expected outcome]
```

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

- [ ] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [ ] I've completed the PR template to the best of my ability
- [ ] I've included tests if applicable
- [ ] I've documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] I've applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [x] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [x] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Low Risk**
> Mostly documentation and test-mock adjustments, plus a new error code
mapping; low likelihood of runtime impact aside from any new code paths
relying on the added error constant/i18n key.
> 
> **Overview**
> Updates `Predict/README.md` with detailed documentation of the new
`PredictBuyWithAnyToken` single-route buy flow, including its
controller-driven active order state machine, component breakdown, and
hook responsibilities.
> 
> Adjusts several Predict component tests to mock
`usePredictActiveOrder` as returning only `activeOrder` (removing
now-unused mocked methods), and extends
`PREDICT_ERROR_CODES`/`getPredictErrorMessages` with
`PREVIEW_NOT_AVAILABLE`.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
8c2e6fc. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

---------

Co-authored-by: Matthew Walsh <matthew.walsh@consensys.net>

…nfig (#28105)

Reverts #28046 which was blocking E2E.

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Medium Risk**
> Reverts perps-withdraw-specific confirmation/pay behavior and
downgrades `@metamask/transaction-pay-controller`, which can subtly
affect transaction-pay quoting/config and related UI/metrics.
> 
> **Overview**
> Reverts the perps withdraw confirmation integration by removing
`TransactionType.perpsWithdraw` special-casing across confirmations
(alert banner/footer visibility, back-navigation, insufficient-balance
ignoring, bridge-fee tooltip messaging, custom-amount calculations, and
pay metrics/tests).
> 
> Simplifies `useTransactionPayPostQuote` to always set `refundTo` via
the Predict Safe proxy and removes the Hyperliquid/perps-withdraw config
path.
> 
> Adjusts CI to tighten the iOS JS bundle size threshold (54 → 53) and
downgrades `@metamask/transaction-pay-controller` (with corresponding
lockfile/state snapshot updates, including removal of some persisted
state fields like `providerAutoSelected`/`tokenWarnings`).
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
d322782. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

…#28048)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

This PR migrates Ramp **Buy** UI under `app/components/UI/Ramp/Views/`
and `app/components/UI/Ramp/components/` (excluding
Deposit/Aggregator-only flows where noted) from `app/component-library`
primitives to **`@metamask/design-system-react-native`** for `Text`,
`Icon`, `Button`, and related enums (`TextVariant`, `TextColor`,
`IconColor`, `FontWeight`, `ButtonVariant`, etc.).

**Motivation:** Align Ramp with the MetaMask mobile design system for
consistent typography, icons, and buttons.

**Scope notes:**
- **Deferred** (follow-up): Bottom sheets, Toast wiring, composite list
rows (avatars/badges), and some `BannerAlert` usages remain on
component-library where a full migration would require larger
sheet/toast work.
- **Cross-touch:** Minimal updates in Deposit `ConfigurationModal`,
`TokenSelectorModal`, and Aggregator `SettingsModal` for shared types
(e.g. `IconName`/`IconColor` for toasts and `MenuItem`).
- **BuildQuote amount:** Hero amount uses the same **dynamic font
scaling** pattern as `PredictAmountDisplay`
(`getFontSizeForInputLength`, `lineHeight = fontSize + 10`,
`tracking-tight`) with **regular** weight for a lighter display.

## **Changelog**

<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`

If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`

(This helps the Release Engineer do their job more quickly and
accurately)
-->

CHANGELOG entry: Updated Ramp on-ramp screens to use the MetaMask design
system for typography, icons, and primary actions.

## **Related issues**

Fixes:

## **Manual testing steps**

```gherkin
Feature: Ramp buy flow design system migration

  Scenario: Build quote amount displays and keypad still work
    Given the user opens Buy and reaches the amount (Build Quote) screen
    When they enter an amount using the keypad and optional quick amounts
    Then the amount displays with readable typography and quotes continue to load as before

  Scenario: Settings and payment flows still open
    Given the user is on the Build Quote screen
    When they open settings or payment selection where migrated components are used
    Then screens render without crashes and primary actions match expected behavior
```

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

N/A

### **After**

N/A

## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I've included tests if applicable
- [x] I've documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I've applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Medium Risk**
> Medium risk because it broadly changes rendering primitives
(Text/Icon/Button), style tokens, and toast/icon enums across critical
Ramp flows, which can introduce UI regressions even if logic is mostly
unchanged.
> 
> **Overview**
> Updates Ramp Buy/Deposit UI to use
`@metamask/design-system-react-native` primitives and tokens for `Text`,
`Icon`, `Button`, and related enums, including updating
tests/mocks/snapshots to match the new render output.
> 
> Refines the `BuildQuote` hero amount display by introducing
`getFontSizeForInputLength`-based dynamic sizing (and cursor sizing)
instead of `adjustsFontSizeToFit`, and switches some color/variant
mappings to design-system equivalents while keeping Toast icon color
enums on the component-library where required.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
fd362d7. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**
* Simplify Metro OAuth module mocks use one variable, isE2E or
E2E_MOCK_OAUTH=true at bundle time.
* Removes unused Metro env flags.
<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

## **Changelog**

<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`

If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`

(This helps the Release Engineer do their job more quickly and
accurately)
-->

CHANGELOG entry: null

## **Related issues**

Fixes:

## **Manual testing steps**

```gherkin
Feature: Metro OAuth mocks for E2E/perf bundles

 Scenario: Production bundle without E2E mock flags
    Given Metro runs with IS_TEST not "true", METAMASK_ENVIRONMENT not "e2e", and E2E_MOCK_OAUTH not "true"
    When the app bundle is produced
    Then seedless-onboarding-controller and OAuthLoginHandlers resolve to real modules 
 
 Scenario: E2E bundle
    Given Metro runs with IS_TEST="true" or METAMASK_ENVIRONMENT="e2e"
    When the app bundle is produced
    Then seedless-onboarding-controller and OAuthLoginHandlers can resolve to tests/module-mocking implementations

```

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**
<img width="1122" height="73" alt="Screenshot 2026-03-31 at 12 03 06 AM"
src="https://github.com/user-attachments/assets/17feb85d-724c-4617-bfe7-83a15851c1ad"
/>
<img width="1127" height="66" alt="Screenshot 2026-03-31 at 12 03 28 AM"
src="https://github.com/user-attachments/assets/c4523da3-f5b7-4c96-ad9c-c7e07e8a53e5"
/>


<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [ ] I've included tests if applicable
- [x] I've documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I've applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Medium Risk**
> Touches Metro module resolution logic used during bundling;
misconfigured env vars could unintentionally enable or disable
seedless/OAuth mocks for test/perf builds.
> 
> **Overview**
> **Simplifies E2E Metro module mocks configuration.** Metro now enables
both `seedless-onboarding-controller` and `OAuthLoginHandlers` redirects
whenever standard E2E detection (`IS_TEST`/`METAMASK_ENVIRONMENT=e2e`)
is true, *or* when `E2E_MOCK_OAUTH=true` is set at bundle time.
> 
> Removes the previously supported fine-grained env toggles (and their
documentation comments) in favor of the single override, and updates
Appwright onboarding perf project comments accordingly.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
bbfb854. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

…ctions (#26479)

## **Description**

Cancelled or dropped smart transactions never get mined, so
`getSmartTransactionByMinedTxHash()` returns nothing and
`is_smart_transaction` was never set. This caused "Smart transaction
failed" errors to appear under `is_smart_transaction=false` in metrics.

Since `getSmartTransactionMetricsProperties()` is only called when smart
transactions are enabled for the chain (gated by
`selectShouldUseSmartTransaction` in `stx.ts`), we can safely return `{
is_smart_transaction: true }` even when the mined hash lookup fails —
the transaction still went through the smart transaction flow.

### Context

In PR #21027, `return {}` was intentionally introduced for the
`!smartTransaction` case to fix a bug where `undefined` smart
transactions were being misclassified as `is_smart_transaction: true`
(due to `!smartTransaction?.statusMetadata` evaluating to `true` for
`undefined`).

That fix was correct for the general case, but it didn't account for
cancelled/dropped smart transactions — these go through the STX flow but
never produce a mined hash, so `getSmartTransactionByMinedTxHash()`
returns nothing. Since this function is only reachable when STX is
enabled for the chain, returning `{ is_smart_transaction: true }` here
is safe and gives us accurate metrics for failed STX.

## **Changelog**

CHANGELOG entry: null

## **Related issues**

N/A

## **Manual testing steps**

This is a metrics-only change. `is_smart_transaction` is not used in any
business logic, UI rendering, or transaction routing — it is purely an
analytics property on the "Transaction Finalized" event.

Verification:
1. Confirm unit tests pass for
`app/util/smart-transactions/index.test.ts`
2. Confirm that cancelled/dropped smart transactions now report
`is_smart_transaction: true` in the "Transaction Finalized" event in
Mixpanel

## **Screenshots/Recordings**

N/A — no UI changes.

## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I've included tests if applicable
- [x] I've documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] I've applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Low Risk**
> Low risk metrics-only change: adjusts analytics properties when a
smart transaction record can’t be found, with a unit test update to lock
in the new behavior.
> 
> **Overview**
> `getSmartTransactionMetricsProperties` now returns `{
is_smart_transaction: true }` (instead of `{}`) when no smart
transaction is found by mined hash, ensuring cancelled/dropped smart
transactions are still classified as smart transactions in analytics.
> 
> Updates the corresponding unit test to expect `is_smart_transaction:
true` in this no-record/no-wait scenario.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
8184363. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

Bridge zero-state scrolling could get stuck when a drag started from the
amount area above trending tokens because the outer `BridgeView` wrapper
always claimed the initial responder.

This change keeps the existing blur-and-close behavior for other bridge
states, but lets the scroll view own the gesture when zero-state
trending content is visible so users can scroll naturally into the
trending section.

## **Changelog**

<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`

If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`

(This helps the Release Engineer do their job more quickly and
accurately)
-->

CHANGELOG entry: Fixed bridge zero-state trending scrolling when
dragging from the amount area

## **Related issues**

Fixes:

## **Manual testing steps**

```gherkin
Feature: Bridge zero-state trending scroll

  Scenario: user scrolls into trending tokens from the amount area
    Given I am on the Bridge screen with swaps trending tokens enabled
    And I have not entered a source amount so the zero-state trending section is visible

    When user drags upward starting from the amount area toward the trending section
    Then the Bridge screen should scroll
    And the trending section should continue scrolling without getting stuck

  Scenario: user taps outside the input in non-zero bridge states
    Given I am on the Bridge screen with a positive source amount entered

    When user taps outside the source input area
    Then the source input should blur
    And the keypad should close
```

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

N/A

### **After**

N/A

## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I've included tests if applicable
- [x] I've documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I've applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

<!-- Generated with the help of the pr-description AI skill -->

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Low Risk**
> Low risk UI gesture-handling change limited to the Bridge zero-state
when the trending-tokens flag is enabled; main risk is unintended
responder behavior differences in that specific mode.
> 
> **Overview**
> Prevents `BridgeView`’s outer wrapper from always claiming touch
responder events by making `onStartShouldSetResponder` conditional.
> 
> When the bridge is in **zero-state** and *trending tokens* are
enabled, the wrapper no longer intercepts the initial gesture so the
inner `ScrollView` can scroll normally; all other modes keep the
existing tap-to-blur input and close keypad behavior.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
61a894d. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->